<template>
  <view class="question-list" :style="{ marginTop: isHeaderFixed ? '90rpx' : '0' }">
    <navigator
      v-for="(question, index) in questions"
      :key="index"
      class="question-item"
      :url="getQuestionUrl(question)"
    >
      <view class="question-content">
        <view class="question-icon" v-if="showIcon">
          <text class="icon">V</text>
        </view>
        <view class="question-text">
          <text>{{ question.title }}</text>
        </view>
      </view>
      
      <!-- 掌握状态标记 -->
      <view v-if="question.mark" class="mastery-badge" :class="getMasteryClass(question.mark)">
        <image :src="getMasteryIcon(question.mark)" mode="aspectFit"></image>
      </view>
      
      <view class="difficulty">
        <text :class="getDifficultyClass(question.difficulty)">{{ question.difficulty }}</text>
        <text class="arrow">›</text>
      </view>
    </navigator>
  </view>
</template>

<script setup>
import { defineProps, ref } from 'vue';

const props = defineProps({
  questions: {
    type: Array,
    required: true
  },
  isHeaderFixed: {
    type: Boolean,
    default: false
  },
  showIcon: {
    type: Boolean,
    default: false
  },
  baseUrl: {
    type: String,
    default: '/subPackages/question_answer/question_answer'
  },
  idArrayParam: {
    type: String,
    default: ''
  },
  categoryParam: {
    type: String,
    default: ''
  }
});

// 获取难度对应的样式类
const getDifficultyClass = (difficulty) => {
  switch (difficulty) {
    case '简单':
      return 'difficulty-easy';
    case '中等':
      return 'difficulty-medium';
    case '困难':
      return 'difficulty-hard';
    default:
      return '';
  }
};

// 获取掌握状态对应的图标
const getMasteryIcon = (mark) => {
  switch(mark) {
    case '已掌握':
      return '/static/icons/checked.png';
    case '晚点再刷':
      return '/static/icons/alarm.png';
    case '不掌握了':
      return '/static/icons/wrong.png';
    default:
      return '';
  }
};

// 获取掌握状态对应的样式类
const getMasteryClass = (mark) => {
  switch(mark) {
    case '已掌握':
      return 'mastery-mastered';
    case '晚点再刷':
      return 'mastery-review-later';
    case '不掌握了':
      return 'mastery-not-mastered';
    default:
      return '';
  }
};

// 构建问题详情页URL
const getQuestionUrl = (question) => {
  let url = `${props.baseUrl}?id=${question.id}`;
  
  if (props.idArrayParam) {
    url += `&idArray=${props.idArrayParam}`;
  }
  
  if (props.categoryParam) {
    url += `&category=${encodeURIComponent(props.categoryParam)}`;
  }
  
  return url;
};
</script>

<style lang="scss">
.question-list {
  padding: 0 20rpx;
  background-color: #fff;
  
  .question-item {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    overflow: hidden;
    .question-content {
      flex: 1;
      min-width: 0; // 关键：允许内容收缩
      display: flex;
      align-items: center; 
      .question-icon {
        width: 40rpx;
        height: 40rpx;
        background-color: #f6960a;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        
        .icon {
          font-size: 24rpx;
          color: #fff;
          font-weight: bold;
        }
      }
      
      .question-text {
        font-size: 30rpx;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
       flex: 1;
      }
    }
    
    /* 掌握状态标记 */
    .mastery-badge {
      width: 40rpx;
      height: 40rpx;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      
     /* &.mastery-mastered {
        background-color: #4cd964;
      }
      
      &.mastery-review-later {
        background-color: #f6960a;
      }
      
      &.mastery-not-mastered {
        background-color: #ff3b30;
      } */
      
      image {
        width: 30rpx;
        height: 30rpx;
      }
    }
    
    .difficulty {
     display: flex;
     width: 100rpx; 
     flex: none; // 禁止伸缩
     align-items: center;
     justify-content: flex-end;
     margin-left: 20rpx;
      .difficulty-easy {
        font-size: 26rpx;
        color: #4cd964;
        margin-right: 20rpx;
      }
      
      .difficulty-medium {
        font-size: 26rpx;
        color: #f6960a;
        margin-right: 20rpx;
      }
      
      .difficulty-hard {
        font-size: 26rpx;
        color: #ff3b30;
        margin-right: 20rpx;
      }
      
      .arrow {
        font-size: 40rpx;
        color: #ccc;
      }
    }
  }
}
</style>